import React, { useEffect, useRef } from 'react';

// 引入bpmn工作流绘图工具栏(bpmn-js)样式等
import 'bpmn-js/dist/assets/bpmn-js.css';
import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';

interface IService {
  mount: (el: HTMLElement) => void;
  unmount: () => void;
}

const MiniBpmn: React.FC<{ service: IService } & React.HTMLAttributes<HTMLDivElement>> = ({
  service,
  ...restProps
}) => {
  const elRef = useRef<HTMLElement | null>();
  useEffect(() => {
    if (elRef.current) service.mount(elRef.current);
    return () => {
      service.unmount();
    };
  }, [service]);

  return (
    <div
      ref={(el) => {
        elRef.current = el;
      }}
      {...restProps}
    />
  );
};
export default MiniBpmn;
